<template>
  <div>
    <nav class="mui-bar mui-bar-tab">
      <router-link to="/" class="mui-tab-item " >
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link to="/Category" class="mui-tab-item mui-active" >
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">分类</span>
      </router-link>
      <router-link to="/Shopcart" class="mui-tab-item" >
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link to="/" class="mui-tab-item" >
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">我的</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  import mui from '../../../mui/js/mui.min'
  mui('body').on('tap','a',function () {
    window.top.location.href=this.href

  })
  export default {
    name: "CategoryFooter"
  }
</script>

<style scoped>
  .title{
    margin: 20px 15px 10px;
    color: #6d6d72;
    font-size: 15px;
  }

  .oa-contact-cell.mui-table .mui-table-cell {
    padding: 11px 0;
    vertical-align: middle;
  }

  .oa-contact-cell {
    position: relative;
    margin: -11px 0;
  }

  .oa-contact-avatar {
    width: 75px;
  }
  .oa-contact-avatar img {
    border-radius: 50%;
  }
  .oa-contact-content {
    width: 100%;
  }
  .oa-contact-name {
    margin-right: 20px;
  }
  .oa-contact-name, oa-contact-position {
    float: left;
  }
  .mui-active{
    color: #e02e24 !important;
  }
</style>
